<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" type="text/css" href="css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.7/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="lib/icheck/icheck.css" />

		<link rel="stylesheet" type="text/css" href="skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
		<style type="text/css">
			body,
			#l-map {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
			}
		</style>
		<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>

		<!-- 百度地图秘钥 -->
		<script src="http://api.map.baidu.com/api?v=2.0&ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34" type="text/javascript"></script>

		<title>查询历史轨迹</title>
	</head>

	<body>
		<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 历史轨迹管理 <span class="c-gray en">&gt;</span> 轨迹浏览 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
				title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>

		<div class="text-c"> 日期范围：
			<!-- <input type="time" id="date_time" style="width:200px;"/>
    <input id="dminDate" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d '})"/>
    <input id="dmaxDate" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',maxDate:'%y-%M-{%d+1} '})"/>
   --><input type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm',datetimestart:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d \'}'})" id="datetimestart" class="input-text Wdate" style="width:200px;">
			<span class="c-gray en">&gt;</span> <span class="c-gray en">&gt;</span>
			<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm',datetimeend:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datetimeend" class="input-text Wdate" style="width:200px;">

			<!-- // <input type="text" class="input-text" style="width:250px" placeholder="输入关键字" id="" name="">
  --><button onclick="query()" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 查询轨迹</button>
			<button onclick="play()" id="run">开始</button>
			<button onclick="stop()" id="stop">停止</button>
			<!-- <button onclick="pause()" id="pause">暂停</button> -->

		</div>
		<div id="l-map"></div>
	</body>

</html>

<script type="text/javascript">
	var map = new BMap.Map("l-map");
	map.centerAndZoom(new BMap.Point(116.37231894589, 39.976018510037), 14);
	map.addControl(new BMap.NavigationControl()); //地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
	map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
	map.addControl(new BMap.ScaleControl()); //比例尺控件，默认位于地图左下方，显示地图的比例关系。
	map.addControl(new BMap.MapTypeControl()); //地图类型控件，默认位于地图右上方。
	map.addControl(new BMap.GeolocationControl()); //定位控件，针对移动端开发，默认位于地图左下方。
	map.enableScrollWheelZoom();

	function query() {
		var start = $('#datetimestart').val() + ":00";
		var end = $('#datetimeend').val() + ":00";
		start = start.replace(/-/g, "/");
		end = end.replace(/-/g, "/");
		console.log(start + "val()" + end);
		var startDate = new Date(start);
		var endDate = new Date(end);
		var timespan = endDate.getTime() - startDate.getTime();
		console.log(startDate + "val()" + end + ":" + timespan);
		console.log(timespan);
		if (timespan > 24 * 3600 * 1000) {

			alert('时间段不能超过一天');
			return;
		}
		var now = new Date();
		if (endDate.getTime() - now.getTime() > 0) {
			alert('结束时间不能超过当前时间');
			return;
		}
		var starttimestamp = Date.parse(startDate);
		var endttimestamp = Date.parse(endDate);
		console.log(starttimestamp + "时间戳/1000之前" + endttimestamp);
		starttimestamp = starttimestamp / 1000;
		endttimestamp = endttimestamp / 1000;
		console.log(starttimestamp + "时间戳" + endttimestamp);

		var address = 'http://api.map.baidu.com/trace/v2/track/gethistory?' +
			'ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34&service_id=117396&entity_name=${param.username}' +
			'&start_time=' + starttimestamp + '&end_time=' + endttimestamp + '&simple_return=2&is_processed=1&page_index=1&page_size=5000&sort_type=1';

		$.ajax({
			type: 'get',
			url: address,
			dataType: 'jsonp',
			success: function(trace_data) {
				points = trace_data.points;
				if (points.length < 1) {
					alert('无结果');
					return;
				}

				for (var i = 0; i < points.length; i++) {
					var point = points[i];
					var bdpoint = new BMap.Point(point[0], point[1]);

					pointArray[i] = bdpoint;
				}
				line = new BMap.Polyline(pointArray, {
					strokeColor: "blue",
					strokeWeight: 4,
					strokeOpacity: 0.6
				});
				map.addOverlay(line);
				map.centerAndZoom(pointArray[0], 14);
				myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
					//offset: new BMap.Size(0, -5),    //相当于CSS精灵
					imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
				});
				var pp = points[0];
				timestamp=pp[2];
				var newDate = new Date();
				newDate.setTime(timestamp * 1000);
				var mSp = pp[3];
				if (mSp) {
					mSp = mSp.toFixed(1);
				} else {
					mSp = 0;
				}
				infoWindow = new BMap.InfoWindow(newDate.toLocaleTimeString() + "<br/>速度" + mSp + "千米/小时", opts); // 创建信息窗口对象
				infoWindow.enableCloseOnClick();
				map.openInfoWindow(infoWindow, pointArray[0]);
				pos = new BMap.Marker(pointArray[0], {
					icon: myIcon
				}); // 创建标注    
				map.addOverlay(pos);

			},
			error: function() {
				alert('查询失败');
			}
		});
	}
	var speed = 100;
	var progress = 0;
	var pos;
	var line;
	var points = []; //还有其他信息
	var pointArray = []; //只有经纬度
	var timer;
	var isPlaying = false;
	var myIcon;
	var infoWindow;
	var opts = {
		width: 150, // 信息窗口宽度
		height: 70, // 信息窗口高度
		title: "最后更新时间:", // 信息窗口标题
		anchor: "ANCHOR_UPPERRIGHT",
		offset: new BMap.Size(0, -35)
	};

	function play() {
		if (isPlaying == true) {
			return;
		}
		isPlaying = true;
		movePoint();
	}

	function movePoint() {
		
		progress++;
		var length = pointArray.length;
		if (progress == length) {
			isPlaying = false;
			return;
		}
		//		   map.centerAndZoom(pointArray[progress], 14);
		map.removeOverlay(pos);
		var pp = points[progress];
	    timestamp=pp[2];
		var newDate = new Date();
		newDate.setTime(timestamp * 1000);
		var mSp = pp[3];
		if (mSp) {
			mSp = mSp.toFixed(1);
		} else {
			mSp = 0;
		}
		//infoWindow = new BMap.InfoWindow(newDate.toLocaleTimeString() + "<br/>速度" + mSp + "米/秒", opts); // 创建信息窗口对象
		//infoWindow.enableCloseOnClick();
		infoWindow.setContent(newDate.toLocaleDateString()
		+newDate.toLocaleTimeString() + "<br/>速度" + mSp + "千米/小时");
		map.openInfoWindow(infoWindow, pointArray[progress]);

		pos = new BMap.Marker(pointArray[progress], {
			icon: myIcon
		}); // 创建标注    
		map.addOverlay(pos);
		timer = setTimeout('movePoint()', 400);
	}

	function stop() {
		if (isPlaying == true) {
			isPlaying = false;
			clearTimeout(timer);
		}

	}

    /**
     * 计算轨迹经过的长度
     * @return  {[type]}   [description]
     */
    this.getTotalLength = function(points) {
        var self = this;
        var d = 0;
        if (!points) {
            return d;
        }
        if (points.length > 0) {
            for (var i = points.length - 1; i >= 1; i--) {
                if (!points[i].equals(points[i - 1])) {
                    d += parseFloat(self.toDecimal3(self._getDistance(points[i], points[i - 1])));
                }
            }
            d = (Math.floor(d)) / 1000;
        }
        return d;
    }
</script>